<template>
  <div id="rule">
    <van-cell-group :border="false">
      <van-cell is-link title-class="left-class" v-for="(item,index) in file" :key="index" @click="toDetail(item.id)">
        <template slot="title">
          <img class="file-img" src="../../assets/mine/file.png"/>
          <span><span class="red-point" v-if="item.is_read == 2"></span>{{item.title}}{{'（'+ item.count +'）'}}</span>
        </template>
      </van-cell>
    </van-cell-group>
    <div class="document" v-for="(item,index) in count" :key="`${index}doc`" @click="preview(item)">
      <img class="doc_img" :src="$common.fileIcon(item.file_type)">
      <div class="doc_info">
        <p class="doc_title"><span class="red-point" v-if="item.is_read == 2"></span>{{item.title}}</p>
        <p class="doc_desc"><span>{{item.date}}</span><span>{{item.size}}</span></p>
      </div>
    </div>
    <!-- <p class="no-data-text" >暂无数据</p> -->
    <template v-if="count.length == 0 && file.length == 0 && done">
      <div class="no-data-img">
        <img src="../../assets/meeting/no_meeting.png">
        <p>暂无数据</p>
      </div>
    </template>
    <!-- <van-button class="bottom-buttons" v-if="(father.father != 0 ||  father.grandfather != 0 ) && done" @click="folderBack" size="large" type="info">返 回</van-button> -->
    <div class="bottom-buttons">
      <van-icon :color="(father.father != '0' ||  father.grandfather != '0' ) && done ? activeColor : disabledColor" class="button" name="arrow-left" @click="folderBack((father.father != '0' ||  father.grandfather != '0' ) && done)"></van-icon>
      <van-icon :color="!lastFather ? disabledColor : activeColor" class="button" name="arrow" @click="folderForward(lastFather)"></van-icon>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default{
    data() {
      return{
        count:[],//文件
        file:[],//文件夹
        done: false,
        father:{
          father: 0,
          grandfather: 0
        },//父类id
        lastFather: null, // 上一次操作的只记录父id , 初始为根节点不可前进 , 且只可前进一次
        activeColor: '#000',
        disabledColor: '#eaedf3'
      }
    },
    watch: {
      lastFather: {
        handler(n, o) {
          console.log(n)
          if(n > o) {

          }
        },
        deep: true
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '规章制度'})
      this.showList(0, true)
    },
    methods: {
      /**
       * 返回上一层
       * @return {[type]} [description]
       */
      folderBack(active) {
        if(active) {
          this.lastFather = this.father.father
          this.showList(this.father.grandfather)
        }
        
      },
      /**
       * 返回上一层
       * @return {[type]} [description]
       */
      folderForward(active) {
        if(active) {
          this.showList(this.lastFather, true)
        }
      },
      /**
       * 列表数据
       * @return {[type]} [description]
       */
      showList(id, resetFather) {
        this.done = false
        let config = {
          method: 'post',
          url: `${this.$common.basePath}attendance.php`,
          data: {
            do: "rule",
            id: this.$store.state.userId,
            father: id
          }
        }
        this.$axios(config).then(res => {
          this.file = res.data.file
          this.count = res.data.count
          this.father = res.data.father
          if (resetFather) {
            this.lastFather = null
          }
          this.done = true
        }).catch(err => {

        })
      },
      toDetail(id) {
        this.count = []
        this.file = []
        this.father = {}
        this.showList(id, true)
      },
      /**
       * 预览
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      preview(item) {
        console.log(item)
        if (item.file_type == 7) {
          this.$toast('请在电脑查看')
        } else {
          let config = {
            method: 'post',
            url: `${this.$common.basePath}attendance.php`,
            data: {
              do: "addreadlog",
              user_id: this.$store.state.userId,
              fileid: item.id,
              father: this.father
            }
          }
          this.$axios(config).then(res => {
            item.is_read = 1
            this.$bridge.callHandler('showPreview', {
              url: `${this.$common.filePath}${item.annex.split('../')[1]}`,
              fileName: item.title
            })
            window.open(`${this.$common.filePath}${item.annex.split('../')[1]}?filename=${item.title}`)
          }).catch(err => {
            this.$toast('标记已读信息异常! 预览失败')
          })
        }
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  #rule {
    padding-bottom: 50px;
    .red-point {
      &:after {
        display: inline-block;
        margin-bottom: 3px;
        margin-right: 5px;
        height: 8px;
        width: 8px;
        content: ' ';
        background: #F54B03;
        border-radius: 4px;
      }
    }
  }
  .bottom-buttons {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    height: 40px;
    width: 100vw;
    border-top: 1px solid #eaedf3;
    background: #fff;
    z-index: 999;
    i.button {
      display: inline-block;
      padding: 15px calc( 25% - 12px );
    }
  }
  .no-data-text {
    text-align: center;
    color: #9e9e9e;
  }
  .margin-t-10{
    margin-top: 10px;
  }
  .margin-r-5{
    margin-right: 5px;
  }
  .left-class{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    max-width: 330px;
    font-size: 17px;
    color: #333333;
    font-weight: 500;
  }
  .file-img{
    width: 20px;
    height: 18px;
    margin-right: 5px;
  }
  .document{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 15px 0px 15px;
  }
  .doc_img{
    width: 20px;
    height: 23px;
  }
  .doc_info{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 15px 0 0 7px;
    padding-bottom: 15px;
    border-bottom: 1px solid #F5F5F5;
  }
  .doc_title{
    width: 100%;
    color: #333333;
    font-size: 17px;
    font-weight: 500;
    margin: 5px 0;
  }
  .doc_desc{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    color: #999999;
    font-size: 14px;
  }
  .van-cell {
    line-height: 35px;
  }
  .van-cell__right-icon {
    height: 35px;
    line-height: 35px;
  }
  .no-data-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30% 0 30% 0;
    background-color: #fff;

    img {
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
</style>
